<template>
  <div class="app-container">
    <el-dialog v-model="isDialog" title="导入表" width="800px" @close="closeDialog">
      <el-table :data="tableData">
        <el-table-column label="序号" align="center" type="index" width="80" />
        <el-table-column label="用户名" align="center" prop="name" />
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const isDialog = ref(false);

const activeTabs = ref("formPage");

const emit = defineEmits(["close", "update"]);
const tableData = ref([
  { id: 0, name: "用户表", createTime: "2023-07-31 18:46:55" },
  { id: 1, name: "角色表", createTime: "2023-07-31 18:47:12" },
  { id: 2, name: "菜单表", createTime: "2023-07-31 18:50:23" },
  { id: 3, name: "消息表", createTime: "2023-07-31 18:52:34" },
  { id: 4, name: "日志表", createTime: "2023-07-31 18:54:18" }
]);
const testData = ref([
  {
    id: 0,
    labelText: "用户名",
    prop: "userName",
    type: "Input",
    required: true
  },
  { id: 1, labelText: "生日", prop: "birthday", type: "DatePicker", required: false },
  { id: 2, labelText: "年龄", prop: "age", type: "InputNumber", required: false },
  {
    id: 3,
    labelText: "简介",
    prop: "description",
    type: "TextArea",
    required: false
  },
  {
    id: 4,
    labelText: "头像",
    prop: "headImg",
    type: "UploadImage",
    required: false
  },
  { id: 5, labelText: "状态", prop: "status", type: "Switch", required: false },
  { id: 6, labelText: "部门", prop: "dept", type: "SelectRadio", required: true },
  { id: 7, labelText: "角色", prop: "role", type: "SelectMultiple", required: true },
  { id: 8, labelText: "性别", prop: "sex", type: "ButtonRadio", required: true },
  { id: 9, labelText: "爱好", prop: "hobby", type: "ButtonCheckbox", required: false },
  { id: 10, labelText: "地区", prop: "area", type: "Cascader", required: false },

]);

const state = reactive({
  dataForm: {}
});

const { dataForm } = toRefs(state);

function init(data) {
  isDialog.value = true;
}

// 选择
function handleSelect() {
  emit("update", testData.value);
  emit("close");
}

// 关闭弹框
function closeDialog() {
  emit("close");
}

defineExpose({
  init
});
</script>
<style lang="scss" scoped>
.page-box {
  height: 600px;
}
</style>